/**
    注意事项：
    此：上传的文件组件默认为隐藏状态，父视图只需要position: relative;即可
 */
<template>
  <div class="input-upload-container">
    <input class="input-upload" type="file" @change="bindFilesChange($event)"/>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    auto: {
      //是否自动上传
      type: Boolean,
      default: true
    },
    params: Object, // 上传文件时携带的参数字典
    callback: Function // 上传成功的回调函数
  },
  methods: {
    bindFilesChange(e) {
      var file = e.target.files[0];
      if (file == undefined) return;
      if (this.auto) {
        this.$.http.uploadImage(file, this.params).then(response => {
          response = response.data;
          // 1.第一种通过事件绑定callback传给父组件
          this.$emit("callback", response);
          // 2.第二种通过父组件传值给子组件
          if (this.callback) this.callback(response);
        });
      } else {
        // 1.第一种通过事件绑定callback传给父组件
        this.$emit("callback", file);
        // 2.第二种通过父组件传值给子组件
        if (this.callback) this.callback(file);
      }
    }
  }
};
</script>
<style scoped>
.input-upload-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.input-upload {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
</style>